import React from 'react';
import {
  Row, Col,
  Form,
  Input,
  Button,
  Radio,
  Select,
  InputNumber,
  Upload, message,
} from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import axios from 'axios'

class GoodsAddManage extends React.Component{
	constructor(props){
		super(props);
		this.state={
			selectType:1
		}
	}
	onChange = e => {
	    console.log('radio checked', e.target.value);
	    this.setState({
	      selectType: e.target.value,
	    });
	};
	onFinish = values => {
	    console.log(values);
	    axios({
	    	method:'post',
	    	url:'http://123.57.67.148:3000/mock/231/mk/addGoods',
	    	data:values
	    }).then(res=>{
	    	console.log(res)
	    	console.log(res)
			if (res.data.tips=='添加成功') message.success(res.data.tips);
			else message.error(res.data.tips);
			this.formRef.current.resetFields();
	    })
	};
	beforeUpload = file => {
		console.log(file)
        // let reader = new FileReader();
        // reader.readAsText(file);         //读取上传文件的内容
        // reader.onload = e => {
        //     let uids = e.target.result.split(‘\r\n‘);      //把读取到的txt文件中的uid以换行符进行分割
        //     return false;                //阻止上传
        // };
        return false;
    };
    resetIt=()=>{
    	this.formRef.current.resetFields();
    }
    formRef = React.createRef();
	render(){
		const validateMessages = {
		  required: '${label}不能为空!',
		  types: {
		    number: '${label} 必须为数字!',
		  },
		  number: {
		    range: '${label} 必须在 ${min} 和 ${max}之间',
		  },
		  pattern: {
		    mismatch: "${label} 的数值不合法",
		  },
		   enum: "${label} must be one of [${enum}]",
		};
		return(
			<div>
				<Row>
					 <Col flex={1}><h2>发布商品</h2></Col>
				</Row>
				<Row>
					 <Col xs={{span:24}} sm={{span:24}} md={{span:20,offset:2}} lg={{span:16,offset: 4}}>
					  <Form 
					       ref={this.formRef}
						  labelCol={{span: 6}} 
						  wrapperCol={{ span: 18 }} 
						  layout="horizontal" 
						  size="middle" 
						  labelAlign="left"
						  name="nest-messages"
						  onFinish={this.onFinish}
						  validateMessages={validateMessages}
						  style={{backgroundColor:'white',padding:'10px'}}>
					        <Form.Item label="商品图像" name={['img']} valuePropName='file'rules={[{ required: true }]}>
					           <Upload action='' multiple={false} beforeUpload={this.beforeUpload}>
							    <Button>
							      <UploadOutlined /> 选择商品图像
							    </Button>
							  </Upload>
					        </Form.Item> 
					        <Form.Item label="商品名称" name={['name']} rules={[{ required: true }]}>
					          <Input />
					        </Form.Item>
					         <Form.Item label="商品价格"  name={['price']} rules={[{required: true,type:'number',min:0,max:99}]}>
					          <InputNumber />
					        </Form.Item>
					         <Form.Item label="商品数量"  name={['stock']} rules={[{required: true,pattern:/^[1-9]\d*$/},  ]}>
					           <InputNumber />
					        </Form.Item>
					        <Form.Item label="商品类型"  name={['type']} rules={[{ required: true,enum:['沙发','书桌','双人床'] }]}>
					          <Select placeholder="请选择">
					            <Select.Option value="1">沙发</Select.Option>
					            <Select.Option value="2">书桌</Select.Option>
					            <Select.Option value="3">双人床</Select.Option>
					          </Select>
					        </Form.Item>
					        <Form.Item label="商品状态" name={['state']} rules={[{ required: true }]}>
					          <Radio.Group onChange={this.onChange} value={this.state.selectType}>
						        <Radio value={1}>上架</Radio>
						        <Radio value={2}>下架</Radio>
						      </Radio.Group>
					        </Form.Item>
					        <Form.Item label=".">
					          <Button htmlType="submit">提交</Button>
					          <Button danger onClick={this.resetIt}>重置</Button>
					        </Form.Item>
					    </Form>
					</Col>
				</Row>
			</div>
		)
	}
}
export default GoodsAddManage;